<template>
	<view class="diaryContent" style="min-height: 100vh;">
		<view class="date">
			<view class="day">{{ date[0] }}</view>
			<view class="year">{{ date[1] }}</view>
			<view class="year">.</view>
			<view class="year">{{ date[2] }}</view>
		</view>
		<view class="diaryBox">
			<view class="diaryImgBox"><image class="diaryImg" :src="beautifulDiary.recommendImgUrl" mode="aspectFill"></image></view>
			<view style="position: relative; margin-top: 16rpx;overflow: hidden;">
				<swiper class="swiperHotbox" :current="curDot" @change="swiperChange" style="height: 376rpx;">
					<swiper-item v-for="(item, index) in beautifulDiary.imgUrls" :key="index">
						<view class="swiper-item"><image class="swiperHotImage" :src="item" mode="aspectFill" /></view>
					</swiper-item>
				</swiper>
				<view class="left" :class="{ fade: curDot === 0 }" @click.stop="leftImg">
					<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/left.png"></image>
				</view>
				<view class="right" :class="{ fade: curDot === beautifulDiary.imgUrls.length - 1 }" @click.stop="rightImg">
					<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/right.png"></image>
				</view>

				<view class="cardContent">{{ beautifulDiary.planClockContent }}</view>
				<view class="cardAuthor">{{ beautifulDiary.nickName || '' }}</view>
			</view>
			<view>
				<text class="diaryFooter">{{ beautifulDiary.userName || '' }}</text>
			</view>
		</view>
		<view class="buttons">
			<button class="diaryButton" @click="showShare = true">
				<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/send_msg.png" class="diaryImgButtonIcon"></image>
				分享
			</button>
		</view>
		<!-- 分享弹窗-->
		<view class="share-pro" v-if="showShare">
			<view class="share-pro-mask" @tap="showShare = false"></view>
			<view class="share-pro-dialog" :class="showShare ? 'open' : 'close'">
				<view class="share-pro-body">
					<view class="share-item">
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share"><view class="wechat"></view></button>
						<text class="text">分享小程序给好友</text>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view @tap="share" class="wechat"></view>
						<text class="text">分享给好友</text>
						<!-- #endif -->
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="share-item" @click="release">
						<view class="font_family share-icon">&#xe600;</view>
						<text class="text">生成海报</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="share-item" @click="release">
						<view class="font_family share-icon" style="width:49px;height:49px;">
							<img style="width: 98rpx;height: 98rpx;" src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/upload/poster.png" />
						</view>
						<text class="text">朋友圈</text>
					</view>
					<!-- #endif -->
				</view>
				<button type="default" class="share-cancel" @tap="showShare = false">取消</button>
			</view>
		</view>
		<poster
			ref="poster"
			:onlyShare="onlyShare"
			:params.sync="poster"
			@close="onShareClose"
			:planClockId="planClockId"
		></poster>
		
		<image-cropper ref="cropper" :src.sync="imageUrl" :visible.sync="visible" @confirm="confirm"></image-cropper>
	</view>
</template>
<script>
import http, { uploadImages } from '../common/request.js';
import { getResolvePath, getCommonShareInfo } from '../common/utils.js';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupShareCard from '@/components/uni-popup/uni-popup-card.vue';
import uniPopupShareWeixin from '@/components/uni-popup/uni-popup-share-weixin.vue';
import ImageCropper from '@/components/uni-image/cropper.vue';
import Poster from './components/poster.vue';
import bridgeApi from '@/common/rayBridgeSDK.js';
export default {
	components: {
		uniIcons,
		uniPopup,
		uniPopupShareCard,
		uniPopupShareWeixin,
		Poster,
		ImageCropper
	},
	data() {
		// 获取当前日期
		var myDate = new Date().toDateString().split(' ');
		const date = [myDate[2], myDate[1], myDate[3]];
		return {
			date,
			visible: false,
			imageUrl: '',
			showPoster: false,
			showShare: false,
			onlyShare: true,
			poster: {
				//主板版海报
				date,
				path: getResolvePath({ go: -1 }),
				logoUrl: '',
				planImageUrl: '',
				imageUrl: '',
				title: '',
				codeUrl: '',
				userName: ''
			},
			beautifulDiary: { imgUrls: [] },
			bgImg: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/cardChoose.png',
			chooseBgImg: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/card/choose.png',
			planClockId: '',
			planId: '',
			list: [],
			curDot: 0,
			img: '',
			dirayId: ''
		};
	},
	onLoad(option) {
		this.planClockId = option.planClockId;
		this.planId = option.planId;
		this.poster.path = getResolvePath({ go: 'card/takeCardShare?id=' + this.planId + '&planClockId=' + this.planClockId });
		uni.loadFontFace({
			family: 'din',
			source: 'url("https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/fonts/PTDINCondensedCyrillic.ttf")'
		});
	},
	async onShareAppMessage(res) {
		if (res.from === 'menu') {
			return getCommonShareInfo();
		} else {
			const imageUrl = await this.$refs.poster.getSharePhoto();
			this.showShare = false;
			return {
				title: this.beautifulDiary.planClockContent,
				path: this.poster.path,
				imageUrl
			};
		}
	},
	mounted() {
		this.getInfo();
	},
	methods: {
		async share() {
			this.$refs.poster.share();
			this.showShare = false;
		},
		
		sharePoster() {
			this.$refs.poster.downloadSharePhoto();
		},
		
		getInfo() {
			http('/api/sysThemePunchPlan/shareInfo/' + this.planClockId, { method: 'GET' }).then(result => {
				this.beautifulDiary = result.data || {};
				const { imgUrls, recommendImgUrl: planImageUrl, planClockContent: title, nickName: userName, qrCodeImgUrl: codeUrl, logoImgUrl: logoUrl } = result.data || {};
				Object.assign(this.poster, { title, userName, codeUrl, planImageUrl, logoUrl, imageUrl: imgUrls[0] });
				this.list = imgUrls;
			});
		},
		//发布
		release: function(e) {
			this.showShare = false;
			this.imageUrl = this.beautifulDiary.imgUrls[this.curDot];
			this.visible = true;
		},
		swiperChange(e) {
			this.curDot = e.detail.current;
		},
		leftImg() {
			let num = this.list.length;
			if (this.curDot > 0) {
				this.curDot--;
			}
		},
		rightImg() {
			let num = this.list.length;
			if (this.curDot < num - 1) {
				this.curDot++;
			}
		},
		chooseBg() {
			this.flag = !this.flag;
		},
		confirm(tempFilePath) {
			this.poster.imageUrl = tempFilePath;
			this.onlyShare = false;
		},
		onShareClose(){
			this.onlyShare = true;
		}
	}
};
</script>

<style>
@import './index.css';
</style>
